<template>
    <a-modal :open="props.modelVisible" title="项目管理" destroyOnClose @cancel="handleCancel" width="610px">
        <template #footer>
            <div style="display: flex;justify-content: center;">
                <a-button type="primary" danger style="margin:0 10px;">删除</a-button>
                <a-button style="margin:0 10px;" @click="editOrSubmit">{{ disabled == true ? '编辑' : '提交' }}</a-button>
                <a-button type="primary" @click="handleOk" style="margin:0 10px;">确认</a-button>
            </div>
        </template>
        <a-form ref="formRef" :model="formState" :label-col="{ style: { width: '130px' } }" :wrapper-col="{ span: 14 }"
            :disabled="disabled" :rules="rules">

            <a-form-item label="项目名称" name="projectName">
                <a-input v-model:value="formState.projectName" />
            </a-form-item>
            <a-form-item label="项目描述" name="projectDescription">
                <a-textarea v-model:value="formState.projectDescription" :autoSize="{ minRows: 4, maxRows: 4 }"
                    allowClear />
            </a-form-item>
            <a-form-item label="项目状态" name="projectStatus">
                <a-select ref="select" v-model:value="formState.projectStatus">
                    <a-select-option :value=1 :disabled="true">未启动</a-select-option>
                    <a-select-option :value=2>启动</a-select-option>
                    <a-select-option :value=3>暂停</a-select-option>
                    <a-select-option :value=4>结束</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="开始时间" name="startTime">
                <a-date-picker v-model:value="formState.startTime" style="width: 100%;" show-time />
            </a-form-item>
            <a-form-item label="结束时间" name="endTime">
                <a-date-picker v-model:value="formState.endTime" style="width: 100%;" show-time />
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs';
import ProjectDao from '@/daos/project_dao';
import type { Rule } from 'ant-design-vue/es/form';
import { message } from 'ant-design-vue';
const projectDao = new ProjectDao()
const formRef = ref()
const disabled = ref<boolean>(true);

interface project {
    projectId: number;
    projectName: any,
    projectDescription: any,
    projectStatus: any,
    startTime: dayjs.Dayjs,
    endTime: dayjs.Dayjs,
}
let formState = reactive<project>({
    projectId: undefined,
    projectName: undefined,
    projectDescription: undefined,
    projectStatus: undefined,
    startTime: undefined,
    endTime: undefined,
});




const props = defineProps({
    modelVisible: {
        type: Boolean,
        default: false
    },
    project: {
        type: Object as () => project,
    }
})

const emit = defineEmits(['update:modelVisible', 'confirm']);

const editOrSubmit = () => {
    disabled.value = !disabled.value

    if (disabled.value == true) {
        formRef.value
            .validateFields()
            .then(async () => {
                let result = await projectDao.updateProject(formState);
                message.success(result.data.data)
                emit('confirm')
                emit('update:modelVisible', false);
            })
            .catch(info => {
                console.log('Validate Failed:', info);
            });
    }
}
onMounted(() => {
    const { projectId, projectName, projectDescription, projectStatus, startTime, endTime } = props.project;
    formState.projectId = projectId
    formState.projectName = projectName
    formState.projectDescription = projectDescription
    formState.projectStatus = projectStatus
    if (startTime == undefined)
        formState.startTime = null
    else
        formState.startTime = dayjs(startTime)
        if (endTime == undefined)
                formState.endTime = null
            else
                formState.endTime = dayjs(endTime)

})
watch(
    () => props.modelVisible,
    (newValue) => {
        if (newValue === true) {
            const { projectId, projectName, projectDescription, projectStatus, startTime, endTime } = props.project;
            formState.projectId = projectId
            formState.projectName = projectName
            formState.projectDescription = projectDescription
            formState.projectStatus = projectStatus
            if (startTime == undefined)
                formState.startTime = null
            else
                formState.startTime = dayjs(startTime)

            if (endTime == undefined)
                formState.endTime = null
            else
                formState.endTime = dayjs(endTime)

            disabled.value = true
        }
    },

);
const handleCancel = () => {

    emit('update:modelVisible', false);
}
const handleOk = () => {
    emit('update:modelVisible', false);
};
//表单验证规则
const rules: Record<string, Rule[]> = {
    projectName: [
        { required: true, message: '项目名称不能为空', trigger: 'blur' },
    ],

    projectStatus: [
        { required: true, message: '状态不能为空', trigger: 'blur' },
    ]
};
</script>
